HTML: 大家好~ 我是HTML，負責網站裡的內容!
CSS: 我負責讓HTML這個醜八怪好看一點~
JS: 我得讓懶惰HTML動起來!
HTML : ...ㄟ不對...

其實我想了很久到底要不要講到HTML/ CSS/ JS因為其實這三個涵蓋非常多東西~ 但我認為還是要至少有一個概念這三個到底是甚麼? 至少... 先讓我們看懂他的意思!!

在進入正題前

首先必須要跟大家坦承一件事情~ HTML 跟 CSS 兩個都不是所謂的「程式語言」而是 「標記語言」
程式語言就是像C++/ Python 這類型，有運算、邏輯的語言。而標記語言就是你常聽到的Markdown Language，只是告訴瀏覽器要如何去呈現這個網站。

講白話一點~ 就是你要用HTML 告訴網站說: 「ㄟ這裡我要放一個圖片~ ㄟ那裏我要放上一個連結!」可以看一下底下的範例

<img src="../assets/logo.png" alt="">

就是告訴網頁說我這裡要放一個叫做logo.png，而位置就在 ../assets/這個資料夾裡面 (../是回到上一層資料夾的意思)
接下來打開瀏覽器就會看到logo.png囉~

HTML基本架構

Element

首先~ 先給大家看一下文字要怎麼做顯示

<h2> This is the Header two Tag </h2>
<p> This is the p tag </p>

第一行是標題，會呈現比較大的字體，第二行就是內文的意思 (其實就像是word檔案一樣啦)

這邊也可以很容已的發現他的組成通常都是:

1. 起始標籤 <p>
2. 結束標籤 </p>
3. 內容: 基本上就是夾在起始標籤跟結束標籤之間的所有東西~ 可以是一串字，也可以在包其他的標籤 (叫做 nesting element)!
   
   而1) + 2) + 3) 就是完整的一個 Element，網站就是由這一個一個element 來組成的喔~ 很簡單吧!!

Attribute

Attribute 可以說是一個擴充功能~ 讓HTML的tag裡可以做出更多的編輯和可能性，有一些attribute也是必須要加上去的才能呈現完整內容，例如:

<a href="https://ithelp.ithome.com.tw/users/20129730">Visit my Profile</a>

這個href就是所謂的attribute~ 其他常見的還有像是 class=''可以利用這個attribute來去連到CSS~ 之後會提到。

Empty Tag

不是所有的 element 都是由起始標籤....結束標籤來組成的，例如剛剛提到的圖片標籤:

<img src="../assets/logo.png" alt="">

就沒有所謂的結束標籤~ 也意味者沒有內容

遠遠來看HTML

就像我剛剛提到的: 網站是由一個一個element 所組成的~ 同時我剛剛也提到 Element 的起始標籤跟結束標籤是可以放其他Element的!! 接下來看看實際上網站的HTML會大概長甚麼樣子:

 <div class="hello">
    <h1>Hello World</h1>
    <p>
      For a guide and recipes on how to configure
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li>
          <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel
          </a>
      </li>
    </ul>
  </div>

我其實一直覺得他很像戰鬥機lol，但是你可以從這個簡單的例子發現HTML通常都是層層包覆的~ 它叫做DOM (白話文又來啦~ 這是一種樹狀的結構表示) 所以你要開發的時候要記得想清楚甚麼東西要包在外面，甚麼包在裡面~ 包的方式不同呈現出來就不一樣囉!
.
.
.
舉例
你在跟你朋友一起包水餃~ 你們決定先用 <div>當作餅皮，<p>當作餡料，所以應該理論上會長這樣:

<div>
    <p>...</p>
</div>

但如果你手賤把餡料包在外面就會變成

<p>
    <div> </div>
</p>

這樣就會...不能吃囉XDXD

常用標籤

我這邊只會大概講到幾個基本的常用的標籤~ 如果有任何不熟悉的之後都可以去 W3schools上面搜尋那個標籤的名稱喔~
\

1. <p>: Paragraph 呈現一般文字
2. <img>: 呈現圖片，要加上src來指向圖片位置
3. <h1>: 他可以從h1 ~ h5代表這不同大小的標題 (數字越小字越大)
4. <a href='' />: 這就是常用到的連結~ href裡面可以放網址，點選這個element就能直接幫你到導到那個網站裡面~
5. <div>: 拿它來包住一個段落 (section)，你單打出這個的時候部會跑出任何東西~
   
   但你可以拿它來包住其他的element，例如:
   
   你可以看到分成藍色跟白色兩大section~ 所以他的結構就應該會像是

<div>
    藍色東西
</div>
<div>
    白色東東
</div>

後記

明天會講到CSS的基本概念~

其實至兩個標記語言不需要花太多時間去記得! 只需要大概知道概念是甚麼就好了，因為就算我已經開發了這麼久到現在還是要一直去剛剛說的W3Schools查一下特別的tag要怎麼去呈現，要配上甚麼不同的attribute